<template>
    <div class="login-main">
        <video class="viedo-bg" loop autoplay src='/static/video/work.webm'></video>
        <div class="login-content">
            <div class="logo">
            </div>
            <div class="text-bg"><img src="../../assets/images/login_word.png" alt=""></div>
            <button class="login-btn" @click='toLogin'>去登录</button>
        </div>
        <div class="login-shade animated fadeIn" v-show="loginBox" @click='cancelLogin'>
        </div>
        <div class="login-box animated bounceInRight" v-show="loginBox">
            <div class="login-title">
                <h1>企想人力核算后台管理系统</h1>
                <p>Manpower accounting management system</p>
                <i class="close-btn" @click='cancelLogin'><img src="../../assets/images/login_cancel_icon.png" alt=""></i>
            </div>
            <div class="login-body">
                <div class="form-group">
                    <i class="input-icon"><img src="../../assets/images/login_icon_username.png" alt=""></i>
                    <input type="text" placeholder="账号" v-model="phone">
                </div>
                <div class="form-group">
                    <i class="input-icon"><img src="../../assets/images/login_icon_password.png" alt=""></i>
                    <input type="password" v-model="password" placeholder="密码">
                </div>
                <div class="form-text">
                    <router-link to="/forgetPwd">忘记密码</router-link>
                </div>
                <div class="form-group">
                    <button style="cursor: pointer;" @click="login">
                        登录
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      loginBox: false,
      phone: "",
      password: "",
      navList: []
    };
  },
  created() {
    let that = this;
    document.onkeydown = function() {
      if (window.event.keyCode == 13) {
        that.login();
      }
    };
  },
  methods: {
    toLogin() {
      this.loginBox = true;
    },
    cancelLogin() {
      this.loginBox = false;
    },

    login() {
      if (this.phone.trim() == "") {
        this.$Modal.error({
          content: "<p>手机号不能为空</p>"
        });
        return false;
      }
      if (this.password.trim() == "") {
        this.$Modal.error({
          content: "<p>密码不能为空</p>"
        });
        return false;
      }
      // 登录后查取用户权限 用户有权限才可跳转首页
      this.getUserInfo().then(state => {
        this.getJurisdiction().then(() => {
          this.$router.push({
            path: "/"
          });
        });
      });
    },
    // 登录信息
    getUserInfo() {
      return new Promise((resolve, reject) => {
        this.$ajax
          .post(
            "/api/login/info/login",
            `phone=${this.phone}&password=${this.password}`
          )
          .then(response => {
            //console.log(response.data);

            if (response.data.code == 1) {
              this.$store.commit("LOGIN", response.data.resdata.userInfo.token);
              this.$store.commit("SAVEUSERINFO", response.data.resdata.userInfo);              
              resolve(true);
            } else {
              this.$Modal.error({
                content: response.data.msg
              });
            }
          })
          .catch(error => {
            this.$Modal.error({
              content: error
            });
          });
      });
    },
    //获取权限
    getJurisdiction() {
      return new Promise((resolve, reject) => {       
        this.$ajax
          .post("/api/index")
          .then(response => {
            // console.log(response.data);
            if (response.data.code == 1) {
              this.$store.commit("NAVLIST", response.data.resdata);
              resolve(true);
            } else {
              this.$Modal.warning({
                title: "提示",
                content: "请联系管理员配置所属角色!"
              });
            }
          })
          .catch(error => {
            this.$Modal.error({
              content: error
            });
          });
      });
    }
  }
};
</script>